{% extends "base.html" %}

{% block content %}
<div class="card">
    <h2><i class="fas fa-clipboard-check"></i> 知识掌握评估</h2>
    <p>通过测试评估您的医学知识掌握情况，系统会根据您的表现推荐需要加强的知识点。</p>
    
    <div id="question-container">
        <div class="form-group">
            <h3>{{ question.question }}</h3>
            {% for option in question.options %}
            <div>
                <input type="radio" id="option-{{ loop.index }}" name="answer" value="{{ option }}">
                <label for="option-{{ loop.index }}">{{ option }}</label>
            </div>
            {% endfor %}
        </div>
        
        <button class="btn" id="submit-answer-btn">提交答案</button>
    </div>
    
    <div id="result-container" style="display: none;">
        <h3>结果</h3>
        <p id="result-text"></p>
        <p id="explanation-text"></p>
        <button class="btn" id="next-question-btn">下一题</button>
    </div>
</div>

<script>
document.getElementById('submit-answer-btn').addEventListener('click', function() {
    const selectedOption = document.querySelector('input[name="answer"]:checked');
    
    if (!selectedOption) {
        alert('请选择一个答案');
        return;
    }
    
    fetch('/assessment', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
        },
        body: JSON.stringify({
            question_id: '{{ question.id }}',
            answer: selectedOption.value
        })
    })
    .then(response => response.json())
    .then(data => {
        document.getElementById('question-container').style.display = 'none';
        document.getElementById('result-container').style.display = 'block';
        
        const resultText = document.getElementById('result-text');
        const explanationText = document.getElementById('explanation-text');
        
        if (data.correct) {
            resultText.textContent = '正确！';
            resultText.style.color = 'var(--success-color)';
        } else {
            resultText.textContent = '不正确';
            resultText.style.color = 'var(--danger-color)';
        }
        
        explanationText.textContent = data.explanation;
    });
});

document.getElementById('next-question-btn').addEventListener('click', function() {
    window.location.reload();
});
</script>
{% endblock %}